<template>
    <page-view class="flex flex-col">
        <title-bar>影厅</title-bar>
        <div class="content-box flex-1 overflow-auto">
            <van-pull-refresh v-model="isloading" @refresh="onRefresh">
                <van-list 
                v-model:loading="isloading" 
                finished-text="没有更多数据了" 
                loading-text="加载中..." 
                :offset="10"
                  @load="loadNextPage" 
                  :finished="queryParams.pageIndex >= resultData.pageCount"
                  class="movie-list px-[10px] box-border">
                    <div class="movie-item border-0 border-b border-solid border-gray-300 py-[10px]"
                      v-for="item in resultData.listData" :key="item.id">
                        <div class="font-bold">{{ item.hall_name }}</div>
                        <div class="text-gray-500 text-[14px] my-[5px] truncate">{{ item.address }}</div>
                        <div class="tags">
                            <van-tag v-for="(item, index) in item.tags.split(',')" :key="item"
                              :color="index % 2 == 0 ? '#FF9E21' : '#01BB84'" class="mr-[5px]">
                                {{ item }}
                            </van-tag>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </page-view>
</template>
<script setup>
import titleBar from "../components/title-bar.vue";
import API from "../utils/API";
import { ref, reactive } from "vue";
const queryParams = reactive({
    pageIndex: 1,
    hall_name: "",
})
const isloading = ref(false);
const resultData = reactive({
    listData: [],
    pageCount: 0,
})
const queryData = () => {
    isloading.value = true;
    API.hallInfo.getListByPage(queryParams).then(res => {
        resultData.listData = resultData.listData.concat(res.data.listData);
        resultData.pageCount = res.data.pageCount;
    }).finally(() => {
       
        isloading.value = false;
    });
};
const loadNextPage = () => {
    queryParams.pageIndex++;
    queryData();
    //加载下一页的时候不能替换原来的数据
};
const onRefresh = () => {
    //先把页面变成1
    queryParams.pageIndex = 1; 
    //清空数据
    resultData.listData = [];
    queryData();
};
queryData();
</script>
<style>
</style>